<template>
  <div id="audit">
    <view class="nav-box">
      <view class="nav-box-text">
        <image src="@/static/img/home/person.png" class="person"></image>

        <view class="welcome">
          <view
            ><text>{{ userInfo.nickName }}</text></view
          >
          <view
            ><text>{{ userInfo.dept.deptName }}</text></view
          >
        </view>
      </view>
    </view>
    <view class="project">
      <text>{{ projectInfo.name }}</text>
    </view>
    <view class="uni-list">
      <view
        v-for="(formBlock, index) in formBlocks"
        :key="index"
        class="form-block"
      >
        <uni-forms>
          <!-- 				<uni-forms-item label="批次" name="batch">
					{{ form.batch }}
				</uni-forms-item> -->
          <uni-forms-item label="材料名称" name="name">
            {{ formBlock.name }}
          </uni-forms-item>
          <uni-forms-item label="材料代码" name="code">
            {{ formBlock.code }}
          </uni-forms-item>
          <uni-forms-item label="规格型号" name="model">
            {{ formBlock.model }}
          </uni-forms-item>
          <uni-forms-item label="进场数量" name="number">
            {{ formBlock.number }}
          </uni-forms-item>
          <uni-forms-item label="出厂批号" name="factoryCode">
            {{ formBlock.factoryCode }}
          </uni-forms-item>
          <uni-forms-item label="品牌" name="brand">
            {{ formBlock.brand }}
          </uni-forms-item>
          <uni-forms-item label="生产厂家" name="factory">
            {{ formBlock.factory }}
          </uni-forms-item>
          <uni-forms-item label="进场日期" name="approach">
            {{ formBlock.approach }}
          </uni-forms-item>
          <uni-list-item name="usersuserName" required>
            <template v-slot:header
              ><text class="slot-box">验收人</text></template
            >
            <template v-slot:body><text style="width: 0"></text></template>
            <template v-slot:footer>
              <view class="tree-select">
                {{
                  users.length > 0
                    ? users
                        .map((item) => {
                          return item.userName;
                        })
                        .join()
                    : "请选择"
                }}
              </view>
            </template>
          </uni-list-item>
          <uni-forms-item label="进场材料及运输车辆照片信息" id="hinde">
            <uni-group>
              <uni-file-picker
                :disabled="true"
                v-model="formBlock.files"
                limit="9"
                :del-icon="false"
                @delete="
                  (e) => {
                    return delets(e);
                  }
                "
                @select="
                  (e) => {
                    return detailUpload(e);
                  }
                "
              ></uni-file-picker>
            </uni-group>
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>
    <view class="uni-list">
      <uni-forms ref="checkform" :rules="rules" :modelValue="checkform">
        <uni-forms-item label="审批" name="radio">
          <uni-data-checkbox
            v-model="radio"
            :localdata="sex"
          ></uni-data-checkbox>
        </uni-forms-item>
        <uni-forms-item label="材料出场证明（必填项）" name="pics" required>
          <uni-group>
            <uni-file-picker
              v-model="checkform.pics"
              limit="9"
              @delete="
                (e) => {
                  return delets(e, '1');
                }
              "
              @select="
                (e) => {
                  return detailUpload(e, 'photo');
                }
              "
            ></uni-file-picker>
          </uni-group>
        </uni-forms-item>
        <uni-forms-item label="现场验收情况（必填项）" name="pics1" required>
          <uni-group>
            <uni-file-picker
              v-model="checkform.pics1"
              limit="9"
              @delete="
                (e) => {
                  return delets(e, '2');
                }
              "
              @select="
                (e) => {
                  return detailUpload(e, 'file');
                }
              "
            ></uni-file-picker>
          </uni-group>
        </uni-forms-item>
        <uni-forms-item label="验收描述" name="remark">
          <uni-easyinput
            v-model="checkform.text"
            :maxlength="100"
            :inputBorder="false"
            type="textarea"
            placeholder="请输入"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view style="height: 60px"></view>
    <view class="bottom-nav">
      <button
        type="primary"
        :loading="loading"
        class="btn"
        @click="save()"
        :disabled="Btn"
      >
        保存
      </button>
    </view>
    <tki-tree
      ref="leadertree"
      :range="staff1"
      confirmColor="#4e8af7"
      :multiple="true"
      @confirm="personTreeSelect"
      @cancel="personTreeCancel"
      :selectParent="false"
    />
  </div>
</template>

<script>
import {
  viewDetails,
  Approve,
  inquirestaff,
  getMaterialDetailByMainId,
} from "@/api/material/index.js";
import {
  imgUpload,
  fileUpload,
  getPerson,
  addCheck,
  updateCheck,
  findDetail,
  handleCheck,
  findHistory,
} from "../../api/inspection/index.js";
import { decrypt } from "@/common/jsencrpty.js";

export default {
  data() {
    return {
      radio: 1,
      Btn: false,

      staff1: [],
      roleStatus: "",
      loading: false,
      userInfo: [],
      projectInfo: [],
      sex: [
        {
          text: "通过",
          value: 1,
        },
        {
          text: "退回",
          value: 0,
        },
      ],
      formBlocks: [],
      users: [],
	  from:{
		pics:'',

	  },
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          radius: "10",
        },
      },
      fileLists: [],
      checkform: {
        pics: [],
        pics1: [],
      },
      // 图片上传
      photos: [],
      rules: {
        pics: {
          rules3: [{ required: true, errorMessage: "请上传材料出场证明" }],
        },
        // pics1: {
        // 	rules: [{ required: true, errorMessage: '请上传现场验收情况' }]
        // },
      },
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.userInfo = uni.getStorageSync("userInfo");
    this.userInfo.nickName = decrypt(this.userInfo.nickName);
    this.projectInfo = uni.getStorageSync("projectInfo");
    console.log(option, "材料ID1");
    this.materialsId = option.id;
    this.handlecx();
  },
  onReady() {},
  methods: {
    delets(e, type) {
      if (type == 1) {
        let index = this.checkform.pics.indexOf(e.tempFile);
        this.checkform.pics.splice(index, 1);
      } else if (type == 2) {
        console.log(this.checkform.pics);
        let index = this.checkform.pics1.indexOf(e.tempFile);
        this.checkform.pics1.splice(index, 1);
      }
    },
    async handlecx() {
      const data = {
        pmMaterialMainId: this.pmMaterialMainId,
      };
      console.log(data);
      const row2 = await inquirestaff(this.projectInfo.id);
      this.staff1 = row2.rows.map((item) => {
        return {
          id: item.id,
          label: item.deptName,
          children: item.person.map((items) => {
            return {
              id: items.personId,
              label: items.nickName,
            };
          }),
        };
      });
      getMaterialDetailByMainId(this.materialsId).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.formBlocks = res.data?.materialDetailList.map((item) => ({
            id: item.id,
            pmMaterialDetailId: item.pmMaterialDetailId,
            pmMaterialMainId: item.pmMaterialMainId,
            batch: item.batch || "",
            brand: item.brand || "",
            supplier: item.supplier || "",
            name: item.name || "",
            bidSection: item.bidSection || "",
            code: item.code || "",
            model: item.model || "",
            number: item.number || "",
            factoryCode: item.factoryCode || "",
            factory: item.factory || "",
            approachDate: item.approachDate || "",
            weight: item.weight || "",
            fileIdList: item.fileIdList || [],
            files: item.files || [],
            videoFileIdList: item.videoFileIdList || [],
            videoFiles: item.videoFiles || [],
          }));
          if (res.data?.acceptUserId != null) {
            this.users = res.data?.acceptUserIdList?.map((res) => {
              return {
                userId: res,
                userName: this.findUseranme(res),
              };
            });
          }
          this.staff1=row2.rows.map(item=>{
      	return {
      		id:item.id,
      		label:item.deptName,
      		children:item.person.map(items=>{
      			return {
      				id:items.personId,
      				label:items.nickName
      			}
      		})
      	}
      })
        }
      });
    },
    //根据id查询姓名
    findUseranme(id) {
      let userName = "";
      this.staff1.forEach((item) => {
        if (item.children != null && item.children.length > 0) {
          item.children.forEach((res) => {
            if (id == res.id) {
              userName = res.label;
            }
          });
        }
      });
      return userName;
    },
    // 文件上传成功触发
    fileUpload(e) {
      console.log(e);
    },

    async save(e) {
      console.log(
        this.checkform,
        "13",
        this.checkform.pics.length == 0,
        this.checkform.pics1.length == 0
      );
      if (this.checkform.pics.length == 0 && this.checkform.pics1.length == 0) {
        uni.showToast({
          title: "请上传出厂证明和验收情况图片",
          icon: "none",
          duration: 2000,
        });
      } else if (this.checkform.pics == "") {
        uni.showToast({
          title: "请上传出厂证明图片",
          icon: "none",
          duration: 2000,
        });
      } else if (this.checkform.pics1 == "") {
        uni.showToast({
          title: "请上传验收情况图片",
          icon: "none",
          duration: 2000,
        });
      } else if (this.checkform.pics != "" && this.checkform.pics1 != "") {
        this.save1();
      }
    },
    async save1() {
      console.log(this.checkform);
      const row = await Approve(
        {
          acceptStatus: this.radio,
          acceptDescribe: this.checkform.text,
          acceptFileIdList: this.checkform.pics?.map((res) => {
        return res.id;
      }),
          acceptLocalFileIdList: this.checkform.pics1?.map((res) => {
        return res.id;
      }),
		  pmMaterialMainId: this.materialsId,
		  id: this.materialsId
        },
       
      );
      if (row.code == 200) {
        uni.navigateTo({
          url: "/pages/material/index",
        });
      }
    },
    // 详情文件上传成功触发
    detailUpload(e, type) {
      var that = this;
      that.Btn = true;
      e.tempFilePaths.forEach((res) => {
        console.log("1");
        if (type == "photo") {
          imgUpload(res).then((item) => {
            let datas = JSON.parse(item);
            if (datas.code == 200) {
              uni.showToast({
                title: "图片上传成功",
              });
              this.checkform.pics.push({
                id: datas.data.id,
                url: datas.data.url,
              });
              that.Btn = false;
            } else {
              uni.showToast({
                title: datas.msg,
              });
            }
          });
        } else if (type == "file") {
          imgUpload(res).then((item) => {
            let datas = JSON.parse(item);
            if (datas.code == 200) {
              uni.showToast({
                title: "图片上传成功",
              });
              this.checkform.pics1.push({
                id: datas.data.id,
                url: datas.data.url,
              });
              that.Btn = false;
            } else {
              uni.showToast({
                title: datas.msg,
              });
            }
          });
        }
      });
    },
    handleapprover(e) {
      console.log(e);
      this.form.radio = e;
    },
  },
};
</script>
<style lang="scss" scoped>
#audit {
  min-height: 100vh;
  background-color: #fafafa;

  .nav-box {
    width: 100vw;
    height: 160px;
    margin-top: -44px;
    padding: 56px 20px 56px 20px;
    background-image: url(../../static/img/home/head-bg.png);

    .nav-box-text {
      height: 50px;
      display: flex;
      align-items: center;

      .person {
        width: 48px;
        height: 48px;
      }
      .welcome {
        color: #333;
        font-size: 32rpx;
        margin-left: 40rpx;
      }
    }
  }

  .project {
    padding: 10px;
    border-radius: 8px;
    background-color: #fff;
    margin: -32px 20px 0 20px;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);

    text {
      font-size: 14px;
      font-weight: 700;
    }
  }

  .uni-list {
    background-color: #fff;
    margin: 10px 20px 0 20px;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);

    /deep/ .uni-forms-item__content {
      line-height: 36px;
    }
    /deep/ .uni-forms-item__inner {
      padding: 0 10px;
      border-bottom: 1rpx solid #bfbfbf;
    }
    /deep/ .uni-error-message {
      right: 0;
      left: auto;
      margin-right: 5px;
    }
    /deep/ .uni-date__x-input {
      height: 36px;
      line-height: 36px;
    }
    /deep/ .uni-group {
      margin-top: 0 !important;
    }
    /deep/ .uni-file-picker {
      padding: 4px 0;
    }
    /deep/ .uni-forms-item__label {
      height: auto;
      line-height: 24px;
      align-items: baseline;
    }
    /deep/ .icon-add {
      width: 30px;
    }
    .uni-forms-item {
      &:last-child {
        /deep/ .uni-forms-item__inner {
          border-bottom: 0;
        }
      }
    }
  }

  .bottom-nav {
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 50px;
    padding: 10px;
    position: fixed;
    background-color: #fff;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  }
}
.tree-select {
  flex: 1;
  color: grey;
  font-size: 14px;
}
.slot-box {
  color: #333;
  width: 70px;
  font-size: 14px;
}
#hinde {
  ::v-deep .is-add {
    display: none !important;
  }
}
</style>
